<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <%@ include file="../bootstrap.jsp"%>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="jquery-3.6.3.js"></script>
    <title>打卡日历</title>
    <style type="text/css">
div{
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}
#calendar{ 
    border-bottom: 1px black solid;
    width:400px;
    margin:auto;
}
button{
    border:none;
    background-color: white;
    width:20px;
    height: 20px;
}
#month{
 
    width: 320px;
    float:left;
    height: 40px;
    margin-top: 0;
    margin-bottom: 0;
}
.everyday{
    width:56px;
    float: left;
                      </style>
</head>
<body onload="showDate();">
<h1 align=center>打卡日历</h1>
<hr>
    <div>
       <div id="calendar">
           <div>
               <button onclick="lastMonth();"><img src="${pageContext.request.contextPath}/images/left.png"/></button>
               <span id="dqrq"></span>
               <button onclick="nextMonth();"><img src="${pageContext.request.contextPath}/images/right.png"/></button>
           </div>
           <div>
               <div class="everyday">日</div>
               <div class="everyday">一</div>
               <div class="everyday">二</div>
               <div class="everyday">三</div>
               <div class="everyday">四</div>
               <div class="everyday">五</div>
               <div class="everyday" >六</div>
           </div>
           <div>
           <div id="day" onclick="checkday(this)"></div>
           
           </div>
           
       </div> 
    </div>
   
</body>
<script type="text/javascript">
var today=new Date();
var year=today.getFullYear();//获得年份
var month=today.getMonth()+1;//获得月份，getMonth是从0-11的
var day=today.getDate();//获得当前日
var days=0;

//先判断每个月应该有的天数
function count(){
    if(month!=2){
        if((month==4)||(month==6)||(month==9)||(month==11)){
            days=30;
        }else{
            days=31;
        }
    }else{
        if((year%4)==0&&(year%100)!=0||year%400==0){
            days=29;
        }else{
            days=28;
        }
    }
}
//输出当前日期
function showMonth(){
    var year_month=year+"年"+month+"月"+day+"日";
    document.getElementById("dqrq").innerHTML=year_month;
}
 
function showDate(){
    
	showMonth();
    count();//本月天数
    
    var firstdate=new Date(year,month-1,1);//本年第一天
    var xq=firstdate.getDay();//本年第一天是星期几
    console.log("xq",xq);
    console.log("firstdate",firstdate);
    
    var daterow=document.getElementById("day");
    console.log("daterow",daterow);
   
    daterow.innerHTML="";
    if(xq!=0){
        for(var i=0;i<xq;i++){
            var dayElement=document.createElement("div");
            dayElement.className="everyday";
            daterow.appendChild(dayElement);
        }
    }
    //日期数组
    var date =new Array(); 
    var j=1;   
    for(j=1;j<=9;j++) date[j-1]=year+"-"+month+"-0"+j;  
    
      if(j>=10)
      {
    	  for(;j<=days;j++)
    	  {
    		  date[j-1]=year+"-"+month+"-"+j; 
    	  }   	  
      }

      console.log("date数据:",date);
      
      $.get("../dateremark",{date:date},function(data,status){
			//statu=data;
			console.log("数据:",data);
			console.log("数据:",data.name1);
			
			
			 for(var i=1;i<=days;i++){
			    	//var date=year+"-"+month+"-"+j;  
			    	var dayElement=document.createElement("div");
			        dayElement.className="everyday";
			        
			        let statu="name"+i;
			        console.log("statu",statu);
			        
			        
			        if(data[statu]=="yes"){
			      	  dayElement.innerHTML=i+"√";//显示当前day
			      	  dayElement.style.color="green";
			      }else if(i==day){
			      	 dayElement.innerHTML=i+"";
			          dayElement.style.color="red";
			          //dayElement.style.background="red";
			      }else{
			      	dayElement.innerHTML=i+"";
			      }
			      daterow.appendChild(dayElement);
			      //console.log("打卡日期:",data.statu);
      }
 })
 
}
      
      
    /*  for(var j=1;j<=days;j++){
    	//var date=year+"-"+month+"-"+j;  
    	var dayElement=document.createElement("div");
        dayElement.className="everyday";

        
        if(){
      	  dayElement.innerHTML=j+"√";//显示当前day
      	  dayElement.style.color="red";
      }else if(j==day){
      	 dayElement.innerHTML=j+"";
          dayElement.style.color="red";
          //dayElement.style.background="red";
      }else{
      	dayElement.innerHTML=j+"";
      }
      daterow.appendChild(dayElement); 
            */
     
      
      
     /*  $.ajax({type:"get",
        	dataType:"json",
        	url:"../dateremark",
        	data:date,
        	success:function(msg){
        		console.log("拿到数据msg:",msg);
        		statu=msg;
        	}}) */
      

      
   /*  for(var j=1;j<=days;j++){
    	var date=year+"-"+month+"-"+j;  
    	var dayElement=document.createElement("div");
        dayElement.className="everyday";
        var statu="";
          
        
        
       
		console.log("date:",date);
		
		$.get("../dateremark",{date:date},function(data,status){
			statu=data;
			console.log("数据:",data);
			
			if(statu.length>0){
	        	  dayElement.innerHTML=j+"√";//显示当前day
	        	  dayElement.style.color="red";
	        }else if(j==day){
	        	 dayElement.innerHTML=j+"";
	            dayElement.style.color="red";
	            //dayElement.style.background="red";
	        }else{
	        	dayElement.innerHTML=j+"";
	        }
	        daterow.appendChild(dayElement); 
		
		});
		 */
        
		
        
        /* $.ajax(
        	{type:"get",
        	dataType:"text",
        	url:"../dateremark",
        	data:date,
        	success:function(msg){
        		console.log("拿到数据msg:",msg);
        		statu=msg;
        		
        		console.log("statu:",statu);
        		console.log("date:",date);
                
        		if(statu.length>0){
                	  dayElement.innerHTML=j+"√";//显示当前day
                	  dayElement.style.color="red";
                }else if(j==day){
                	 dayElement.innerHTML=j+"";
                    dayElement.style.color="red";
                    //dayElement.style.background="red";
                }else{
                	dayElement.innerHTML=j+"";
                }
                daterow.appendChild(dayElement);          
	
        	} })        */
  
    

function lastMonth(){
    if(month>1) {
        month=month-1;
    }else{
        month=12;
        year=year-1;
    }
    showDate();
}

function nextMonth(){
    if(month<12) {
        month=month+1;
    }else{
        month=1;
        year=year+1;
    }
    showDate();
}

</script>
</html>